<template>
  <vue-echarts :option="option" theme="macarons"></vue-echarts>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { VueEcharts } from 'vue3-echarts'
import 'echarts/theme/macarons.js'
import { buildOptionFromEcharts } from '@/utils/echarts'

export default defineComponent({
  name: 'VanEchartsLine',
  components: {
    VueEcharts
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    charts: {
      type: Object,
      default: () => {
        return {}
      }
    },
    expand: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  setup(props) {
    function buildOption() {
      const o = buildOptionFromEcharts(props.charts, 'line', props.expand)
      ;(o as any).title.text = props.title
      return JSON.parse(JSON.stringify(o))
    }
    const option = buildOption()
    return {
      option
    }
  }
})
</script>
